<template>
    <!--自动站单站报表-->
  <div class="single-station-report-page">
    <div class="secondary-page-mode">
      <div class="secondary-toolbar">
        <span>数据类型：</span>
        <el-button-group>
          <el-button
            :class="{active:dataType === index}"
            size="small" type="primary" plain
            :key = "index"
            v-for="(item,index) in dataTypeList"
            @click="dataTypeToggle(index)"
          >{{ item.name }}</el-button>
        </el-button-group>&emsp;
        <span>时间段：</span>
        <div class="layoutBox" style="width:242px">
          <el-date-picker
            v-model = "dataValue"
            :type="headtimetype"
            placeholder="选择时间">
          </el-date-picker>
        </div>&emsp;
        <el-button @click="historicalDataSearch"><i class="iconfont icon-sousuo"></i>生成</el-button>
        <el-button type='delet' @click="exportData"><i class="iconfont icon-daochu"></i>导出</el-button>
      </div>
      <div class="currency-mode-wrap">

        <el-scrollbar class="currency-mode-scroll">
          <h4 class="report-form-title">{{headtitle}}</h4>
          <p class="report-form-subtitle">{{statisDate}}</p>
          <div class="report-table-wrap" style="position: relative;">
            <div v-if="reportLoading" class="loading-wrap"></div>
            <div v-if="reportNoDataState" class="no-data-wrap small no-data-table">
              <p>暂无数据</p>
            </div>
            <el-table
              :data="tableData"
              border
              empty-text=" "
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                fixed
                width="50">
              </el-table-column>
              <el-table-column
                prop="statisDate"
                label="时间"
                fixed
                width="160">
              </el-table-column>
              <el-table-column :key="index" v-for="(item,index) in headcolumn"
                  :label="item.projectName">
                <el-table-column
                  :property="item.projectCode"
                  :label="item.projectUnit">
                  <template slot-scope="scope">
                    <div class="data-table-cell" :key="num" v-for="(proj,num) in scope.row.projects">
                            <span
                              v-if="proj.code==item.projectCode"
                            >{{ proj.value}}
                            </span>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
  
  import {formatDate} from '../../assets/js/dateformat'

  let dataTypeList = [{
    name:'日报',
    type:'hour'
  },{
    name:'月报',
    type:'day'
  },{
    name:'年报',
    type:'month'
  }];
  let pickerOptions = {
    shortcuts: [{
      text: '最近一周',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', [start, end]);
      }
    }, {
      text: '最近一个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit('pick', [start, end]);
      }
    }, {
      text: '最近三个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit('pick', [start, end]);
      }
    }]
  };

  let headcolumn={
    enabled:1,
    metal:0,
    projectCode:"w01018",
    projectId:187,
    projectName:"COD",
    projectType:"428F3127A91D467CA8F1EA2749CC087E",
    projectUnit:"mg/L",
    scale:2
  };

  export default {
     name: "singleStationReport",
     data(){
       return {
         reportLoading: true,
         reportNoDataState: false,
         dataTypeList,//数据类型
         dataType: 0,//数据类型选中下标
         pickerOptions,//时间快捷菜单数据
         dataValue:'',//时间绑定数据
         tableData:[],//表格数据,
         siteChecked:{},
         headcolumn,
         headtitle:'',
         statisDate:'',
         headtimetype:'date'
       }
     },
      methods:{
        dataTypeToggle(index){;
          this.dataType = index;
          if(index==0){
            this.headtimetype='date';
          }else if(index==1){
            this.headtimetype='month';
          }else if(index==2){
            this.headtimetype='year';
          }
        },
        getSiteCheckedNodes(nodes){   
          this.siteChecked = nodes;
          this.openPage = nodes.structureType;
          this.historicalDataSearch();
        },
        initTime(){
          this.dataValue=new Date();
        },
        searchcolumn(){
          /* 基本信息请求 */
          var equipIds=[];
          equipIds.push(this.siteChecked.id);

          this.$http.get('/waterenvapi/basic/stationRefProjects',{
            params:{
              equipIds: equipIds.toString()
            }
          }).then((response)=>{
            let dataJson = response.data;
            if(dataJson.code === 200){
              this.headcolumn = dataJson.content.dataList;
            }
          }).catch((error)=>{

          });
        },
        checksiteinit(){
          var self=this;
          var timer=setInterval(function(){
            if(self.siteChecked){
              //self.$refs.cwaterradiotree.selectSingleNode();
              if(self.siteChecked.structureType=='station'){  
                //self.historicalDataSearch();
                clearInterval(timer);
              }  
            }else{
              self.reportLoading = false;
              self.reportNoDataState = true;
            }
          },500);
        },
        convertDateFromString(dateString){
          if (dateString) {
            var date = new Date(dateString.replace(/-/,"/"));
            return date;
          }
        },
        initTitle(){
          var startTime="";
          var endTime="";
           if(this.headtimetype=='date'){
            startTime=formatDate(this.dataValue,'yyyy-MM-dd');
            var date=this.convertDateFromString(startTime);     
            date.setMonth(date.getDate()+1);
            endTime=formatDate(date,'yyyy-MM-dd');
          }else if(this.headtimetype=="month"){
            startTime=formatDate(this.dataValue,'yyyy-MM');
            var date=this.convertDateFromString(startTime);     
            date.setMonth(date.getMonth()+1);
            endTime=formatDate(date,'yyyy-MM');
          }else{
            startTime=formatDate(this.dataValue,'yyyy');
            var date=this.convertDateFromString(startTime);     
            date.setMonth(date.getFullYear()+1);
            endTime=formatDate(date,'yyyy');
          }
          var node=this.siteChecked;
          var statisTypeName=dataTypeList[this.dataType].name;
          this.headtitle=node.label+'单站'+statisTypeName;
          this.statisDate=startTime;
        },
        historicalDataSearch(){    
          if(this.siteChecked.structureType!='station'){
            //this.$message('请选择站点节点！');
            return;
          }
          this.reportLoading = true;
          this.reportNoDataState = false;
          this.searchcolumn();
          this.initTitle();
          var equipIds=[];
          equipIds.push(this.siteChecked.id);
          var statisType=dataTypeList[this.dataType].type;
          var startTime="";
          var endTime="";
          if(this.headtimetype=='date'){
            startTime=formatDate(this.dataValue,'yyyy-MM-dd 00:00:00');
            var date=this.convertDateFromString(startTime);     
            date.setDate(date.getDate()+1);
            endTime=formatDate(date,'yyyy-MM-dd 00:00:00');
          }else if(this.headtimetype=="month"){
            startTime=formatDate(this.dataValue,'yyyy-MM-01 00:00:00');
            var date=this.convertDateFromString(startTime);     
            date.setMonth(date.getMonth()+1);
            endTime=formatDate(date,'yyyy-MM-01 00:00:00');
          }else{
            startTime=formatDate(this.dataValue,'yyyy-01-01 00:00:00');
            var date=this.convertDateFromString(startTime);     
            date.setFullYear(date.getFullYear()+1);
            endTime=formatDate(date,'yyyy-01-01 00:00:00');
          }
          var paramsp={
            equipdIds: equipIds.toString(),
            statisType:statisType,
            startTime:startTime,
            endTime:endTime
          };
          this.$http.get('/waterenvapi/report/autoStationSingleReport',{
            params:paramsp
          }).then((response)=>{
            let dataJson = response.data;
            if(dataJson.code === 200){
              this.tableData = dataJson.content.dataList;
              this.total=dataJson.content.total;
              if(dataJson.content.dataList.length === 0){
                this.reportNoDataState = true;
              }else{
                this.reportNoDataState = false;
              }
            }
            this.reportLoading = false;
          }).catch((error)=>{
            this.reportLoading = false;
            this.reportNoDataState = true;
          });
        },
        exportData(){  //导出数据
          if(this.siteChecked.structureType!='station'){
            this.$message('请选择站点节点！');
            return;
          }
          var equipIds=[];
          equipIds.push(this.siteChecked.id);
          var statisType=dataTypeList[this.dataType].type;
          var startTime="";
          var endTime="";
          if(this.headtimetype=='date'){
            startTime=formatDate(this.dataValue,'yyyy-MM-dd 00:00:00');
            var date=this.convertDateFromString(startTime);     
            date.setDate(date.getDate()+1);
            endTime=formatDate(date,'yyyy-MM-dd 00:00:00');
          }else if(this.headtimetype=="month"){
            startTime=formatDate(this.dataValue,'yyyy-MM-01 00:00:00');
            var date=this.convertDateFromString(startTime);     
            date.setMonth(date.getMonth()+1);
            endTime=formatDate(date,'yyyy-MM-01 00:00:00');
          }else{
            startTime=formatDate(this.dataValue,'yyyy-01-01 00:00:00');
            var date=this.convertDateFromString(startTime);     
            date.setFullYear(date.getFullYear()+1);
            endTime=formatDate(date,'yyyy-01-01 00:00:00');
          }
          location.href="/waterenvapi/report/autoStationSingleReportExport?equipdIds="+equipIds.toString()+'&statisType='+statisType+'&startTime='+startTime+'&endTime='+endTime;
        }
      },
      mounted(){
        this.initTime();
        this.historicalDataSearch()
      },
      created(){
           this.$store.commit("setShowlefttree", true);
           this.siteChecked=this.$store.state.stationInfo;
      },
     components:{
       
     },
     computed:{
        station(){
          return this.$store.state.stationInfo
        }
     },
     watch:{
       station(newvalue){
         this.siteChecked=newvalue;
         this.historicalDataSearch()
       }
     },
     destroy(){

     },
  }
</script>

<style scoped lang="less">
.single-station-report-page{
  height: 100%;
  .currency-mode-wrap{
    height: calc(100% - 56px);
  }
  .currency-mode-scroll{
    height: 100%;
  }
  .report-form-title{
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    text-align: center;
    margin-top: 12px;
  }
  .report-form-subtitle{
    text-align: center;
    line-height: 24px;
    height: 24px;
  }
  .report-table-wrap{
    padding: 10px 34px 0;
  }
}
</style>
